<template>
	<uni-popup ref="loginPopup" type="bottom" :safe-area="false" :mask-click="false">
		<view class="popup-container">
			<view class="title">
				<view>
					<view>欢迎进入{{ appConfig.appName }}</view>
					<view>登录后您将获得更好的用户体验</view>
				</view>
				<uni-icons size="20" type="closeempty" color="#666" @click="close"></uni-icons>
			</view>
			
			<view v-if="!vdata.hasBind" class="agent">
				<view>归属网点：</view>
				<uni-data-picker v-slot:default={data,error,options} :readonly="vdata.hasBind" placeholder="请选择归属网点" popup-title="请选择归属网点" :localdata="vdata.agentList" :map="{text:'agentName',value:'agentNo'}" v-model="vdata.agentNo" style="flex-grow: 1;">
					<view v-if="data.length" class="input-value-border input-value">
						{{ data[data.length - 1].text }}
					</view>
					<view v-else class="input-value-border input-value input-placeholder">请选择归属网点</view>
				</uni-data-picker>
			</view>
			<view class="privacyAndService">
				<checkbox :checked="check" @click="checkboxClick" style="transform:scale(0.7)"/>我已认真阅读并同意<text @click="toUrl('/pageUser/realName/serviceAgreement')">《服务协议》</text>和<text @click="toUrl('/pageUser/realName/privacyPolicy')">《隐私政策》</text>
			</view>
			<button :disabled="!check || (!vdata.agentNo && !vdata.hasBind)" plain open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">登录/注册账号</button>
		</view>
	</uni-popup>
</template>

<script setup>
	import { ref, defineExpose, onBeforeMount, reactive, getCurrentInstance } from 'vue'
	import { onHide } from '@dcloudio/uni-app'
	import storageManage from '@/util/storageManage.js'
	import appConfig from '@/config/appConfig.js'
	import { $getUserWxPhone, $getNearAgentNo, $bindAgentNo, $agentInfoTree } from '@/http/apiManager.js'
	import getLocation from '@/util/location.js'	// 授权 拉取定位信息 异步函数 返回 经纬度和地址信息
	
	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties
	
	const loginPopup = ref()
	
	const emits = defineEmits(['update:value','update:isLogin','isLoginCallback'])
	
	// 数据源
	const vdata = reactive({
		lng: '',	// 经纬度
		lat: '',	//
		agentList: [],	// 网点列表
		hasBind: false,	// 是否绑定的标志
		agentName: '',	// 归属的网点名称
		agentNo: '',	// 归属的网点号
		isLocation: true,	// 拉取定位成功/失败 默认成功
	})
	
	// 请求当前小程序所归属的机构网点信息
	async function getAgentInfoByAppid(){
		if(!storageManage.bAgent()?.length){
			const { bizData } = await $agentInfoTree()
			storageManage.bAgent(bizData)
		}
	}
	/**
	 * 同意用户隐私协议
	 */
	const check = ref(false)
	function checkboxClick(){
		check.value = !check.value
	}
	/**
	 * 用户授权手机号
	 */
	async function decryptPhoneNumber({ detail }){
		if(!detail.code){	// 未取到动态令牌时 展示错误码以及错误信息
			if(detail.errMsg.includes('fail user deny')){
				$infoBox.toast('授权失败，请授权后重新登录！')
			}else{
				$infoBox.toast(`${JSON.stringify(detail.errMsg)}`)
			}
			return
		}
		uni.showLoading({ title: '登录中' })
		try{
			// 未绑定用户归属网点 先绑定用户归属网点
			if(!vdata.hasBind){
				await $bindAgentNo({ agentNo: vdata.agentNo })
				storageManage.isBind(true)	// 更新用户是否归属网点
			}
			// 绑定用户手机号 并返回用户信息 更新用户信息
			const { bizData:fansInfo } = await $getUserWxPhone({ code: detail.code })
			emits('update:value',fansInfo)
			emits('update:isLogin',true)
			storageManage.userInfo(fansInfo)
			storageManage.isLogin(true)
			$infoBox.toast('登录成功')
			// 通讯刷新用户信息
			uni.$emit('USER_REFRESH_USERINFO')
			// 刷新用户资产信息
			uni.$emit('USER_REFRESH_SCORE')
			// 通讯刷新福分乐园信息
			uni.$emit('SCORE_INIT_PAGE')
			// 通讯刷新商户绑定信息
			uni.$emit('USER_REFRESH_MCH',true)
			close()
		}catch(e){
			uni.hideLoading()
			emits('isLoginCallback','')
			$infoBox.toast(e)
		}
	}
	/**
	 * 请求最近的网点 并用于回显
	 */
	async function getNearAgentNo(lng,lat){
		const { bizData } = await $getNearAgentNo({ lng, lat })
		vdata.agentNo = bizData.agent.agentNo
	}
	/**
	 * 打开弹窗
	 */
	async function open(){
		await getAgentInfoByAppid()	// 请求归属网点列表
		vdata.agentList = storageManage.bAgent()
		// 数据初始化
		check.value = false
		uni.showLoading({
			title: '加载中'
		})
		// 根据登录接口返回的isBind字段 判断用户是否已归属网点
		if(storageManage.isBind()){
			// 已绑定归属网点 不进行 定位授权 直接登录
			uni.hideLoading()
			vdata.hasBind = true
			loginPopup.value.open()
			return
		}
		vdata.hasBind = false
		// 未绑定归属网点 需要进行定位授权 拉取最近的网点 如果定位失败 则需要让用户自行选择归属
		const { longitude, latitude, address, isReject } = await getLocation()
		if(isReject){	// 拒绝授权定位
			// 定位获取失败 无法获取最近网点信息 让用户自行选择归属网点
			uni.hideLoading()
			vdata.isLocation = false
			loginPopup.value.open()
		}else{	// 授权定位
			vdata.isLocation = true
			uni.hideLoading()
			await getNearAgentNo(longitude,latitude)
			loginPopup.value.open()
		}
	}
	/**
	 * 关闭弹窗
	 */
	function close(){
		emits('isLoginCallback','')
		loginPopup.value.close()
	}
	/**
	 * 路由跳转
	 */
	function toUrl(url){
		uni.navigateTo({
			url
		})
	}
	defineExpose({ open })
	// 页面关闭时 关闭弹窗
	onHide(()=>{
		loginPopup.value.close()
	})
</script>
<script>
export default {
   options: {
       styleIsolation: 'shared', // 解除样式隔离
   }
}
</script>
<style lang="less" scoped>
	.input-placeholder{
		color: #aaa;
	}
	.input-value-border{
		border: 1px solid #e5e5e5;
		border-radius: 5px;
	}
	.input-value{
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: nowrap;
		font-size: 14px;
		padding: 0 10px;
		padding-right: 5px;
		overflow: hidden;
		height: 35px;
		box-sizing: border-box;
	}
	.popup-container{
		padding: 36rpx;
		box-sizing: border-box;
		background: #fff;
		.title{
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			&>view>view{
				&:nth-child(1){
					font-size: 36rpx;
					color: #1b1a20;
				}
				&:nth-child(2){
					font-size: 24rpx;
					color: #959595;
					margin-top: 10rpx;
				}
			}
		}
	}
	.agent{
		display: flex;
		align-items: center;
		margin-top: 60rpx;
		gap: 24rpx;
		view{
			&:nth-child(1){
				font-size: 28rpx;
				flex-shrink: 0;
			}
		}
	}
	.privacyAndService{
		margin-top: 60rpx;
		font-size: 24rpx;
		color: #666f80;
		text{
			color: #175be6;
		}
	}
	button{
		border: none;
		width: initial;
		font-size: 15px;
		background: #28ca8f;
		margin-top: 36rpx;
		color: #fff;
	}
	:deep(.uni-data-tree-dialog){
		top: -80px;
	}
</style>